import React from "react";
import ReactDOM from "react-dom";
import "./index.less";

import Introduce from "./doc/Introduce";
import Document from "./doc/Document";
import DemoList, { TabPanel } from "./doc/DemoList";
import themeJson from "./theme.json";

import { createTheme, ThemeProvider } from "@material-ui/core/styles";

import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";

import Code1 from "./code/demo1";
import Code2 from "./code/demo2";
import Code3 from "./code/demo3";
import Code4 from "./code/demo4";
import Code5 from "./code/demo5";
import Code9 from "./code/demo9";
const theme = createTheme(themeJson);

const demos = [
  {
    key: "code1",
    text: "基础示例",
    content: <Code1 />
  },
  {
    key: "code2",
    text: "白底模式",
    content: <Code2 />
  },
  {
    key: "code3",
    text: "下拉菜单",
    content: <Code3 />
  },
  {
    key: "code4",
    text: "自定义操作区",
    content: <Code4 />
  },
  {
    key: "code5",
    text: "面包屑",
    content: <Code5 />
  },
  {
    key: "code9",
    text: "组合嵌套",
    content: <Code9 />
  }
];

const demoIndex = 1;

const componentInfo = {
  instruction: (
    <div style={{ fontSize: 13, color: "rgba(22, 29, 37, 1)" }}>
      <p>
        页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。
      </p>
      <p>当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。</p>
    </div>
  )
};

const App = () => {
  const [value, setValue] = React.useState(1);

  const list = [
    {
      label: "介绍",
      component: () => <Introduce />
    },
    {
      label: "示例",
      component: () => <DemoList demoIndex={demoIndex} list={demos} info={componentInfo} />
    },
    {
      label: "属性",
      component: () => <Document />
    }
  ];

  const handleChange = (event: any, newValue: number) => {
    setValue(newValue);
  };

  return (
    <ThemeProvider theme={theme}>
      <div className="app-wrapper">
        <Tabs
          aria-label="main page tabs"
          textColor="secondary"
          indicatorColor="secondary"
          centered
          value={value}
          onChange={handleChange}>
          {list.map(({ label }) => (
            <Tab label={label} key={"label-" + label} />
          ))}
        </Tabs>

        {list.map(({ label, component }, index) => (
          <TabPanel value={value} index={index} key={"component-" + label}>
            {component()}
          </TabPanel>
        ))}
      </div>
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));
